Ext.onReady(function() {

	Ext.QuickTips.init();

	var record_start = 0;

	var url = 'data.json';
	var fields = ['company', 'price', 'change', 'pctChange', {
				name		: 'lastChange',
				type		: 'date',
				dateFormat	: 'Y-m-d'// 指定日期格式
			}];

	var store = new Ext.data.Store({
				proxy		: new Ext.data.HttpProxy({
							method	: 'GET',// 'POST'
							url		: url
						}),
				reader		: new Ext.data.JsonReader({
							root	: 'data',
							fields	: fields
						}),
				sortInfo	: {
					field		: 'company',
					direction	: 'ASC'
				},
				autoLoad	: true
			});

	var cm = new Ext.grid.ColumnModel([new Ext.grid.CheckboxSelectionModel(),
			new Ext.grid.RowNumberer({
						header		: '序号',
						width		: 40,
						renderer	: function(value, metadata, rec, rowIndex) {
							return record_start + rowIndex + 1;
						}
					}), {
				header		: '公司',
				sortable	: true,
				dataIndex	: 'company'
			}, {
				header		: '每股售价',
				sortable	: true,
				renderer	: 'usMoney',
				dataIndex	: 'price'
			}, {
				header		: '波动',
				sortable	: true,
				dataIndex	: 'change'
			}, {
				header		: '波动率',
				sortable	: true,
				dataIndex	: 'pctChange'
			}, {
				header		: '最新更新',
				sortable	: true,
				renderer	: Ext.util.Format.dateRenderer('Y-m-d'),
				dataIndex	: 'lastChange'
			}]);

	var fm = Ext.form;
	var detailCM = new Ext.grid.ColumnModel([
			new Ext.grid.CheckboxSelectionModel(), {
				id			: 'company',
				header		: '公司',
				dataIndex	: 'company'
			}, {
				header		: '每股售价',
				renderer	: 'usMoney',
				dataIndex	: 'price'
			}, {
				header		: '波动',
				dataIndex	: 'change',
				editor		: new fm.NumberField({
							allowBlank	: false,
							// maxValue: 10,
							validator	: function() {
								var maxValue = 10;

								if (this.getValue() > maxValue)
									return '波动数值不能大于' + maxValue;
								else
									return true;
							}
						})
			}, {
				header		: '波动率',
				dataIndex	: 'pctChange'
			}, {
				header		: '最新更新',
				sortable	: true,
				renderer	: Ext.util.Format.dateRenderer('Y-m-d'),
				editor		: new Ext.form.DateField({}),
				dataIndex	: 'lastChange'
			}]);

	// ================================================================

	var publish = new Ext.form.ComboBox({
				fieldLabel		: '出版社',
				store			: new Ext.data.SimpleStore({
							fields	: ['id', 'name'],
							data	: [['1', '清华大学出版社'], ['2', '电子工业出版社'],
									['3', '人民教育出版社']]
						}),
				displayField	: 'name',
				allowBlank		: false,
				name			: 'publish',
				typeAhead		: true,
				mode			: 'local',
				// disabled : true,
				triggerAction	: 'all',
				selectOnFocus	: true,
				forceSelection	: true
			});

	var detailPanel = new Ext.grid.EditorGridPanel({
				title				: '详细信息',
				clicksToEdit		: 1,
				cm					: detailCM,
				autoExpandColumn	: 'company',// id
				store				: store,
				sm					: new Ext.grid.CheckboxSelectionModel({}),
				height				: 200
			});

	detailPanel.on('afteredit', function(e) {
		var r = e.record;
		var nv = e.value; // 新值
		var rowIdx = e.row;
		var columnIdx = e.column;

		var oRec = r.modified; // 原记录
		var oRecJson = Ext.encode(oRec);
			// alert(oRecJson + '\n' + nv);
			// alert('value:' + nv + '\n' + 'rowIdx:' + rowIdx + '\n' + 'columnIdx:' + columnIdx);
		}
	);

	Ext.apply(Ext.form.VTypes, {
				notAllowBlank	: function(v) {
					return false;
				}
			});

	var name = new Ext.form.TextField({
				fieldLabel	: '书名',
				name		: 'name'
			});

	var formPanel = new Ext.form.FormPanel({
		labelAlign			: 'top',
		// labelWidth : 55,
		bodyStyle			: 'padding:0px 5px 0',
		frame				: true,
		autoHeight			: true,
		monitorValid		: true,
		trackResetOnLoad	: true, // required!
		items				: [{
					layout	: 'column',
					border	: false,
					items	: [{
								columnWidth	: 0.5,
								layout		: 'form',
								defaults	: {
									xtype	: 'textfield',
									anchor	: '95%'
								},
								items		: [name, {
											xtype			: 'numberfield',
											fieldLabel		: '价格',
											name			: 'price',
											allowNegative	: false,
											allowDesimals	: true
										}, publish, {
											baseCls		: 'x-plain',
											xtype		: 'panel',
											layout		: 'table',
											fieldLabel	: '建议分类',
											defaults	: {
												xtype	: 'checkbox',
												width	: 60
											},
											isFormField	: true,
											items		: [{
														boxLabel	: '艺术',
														inputValue	: 1,
														name		: 'category1'
													}, {
														boxLabel	: '文艺',
														inputValue	: 2,
														name		: 'category2'
													}, {
														boxLabel	: '设计',
														inputValue	: 3,
														name		: 'category3'
													}, {
														boxLabel	: '生活',
														inputValue	: 4,
														name		: 'category4'
													}, {
														boxLabel	: '传记',
														inputValue	: 5,
														name		: 'category5'
													}]
										}]
							}, {
								columnWidth	: 0.5,
								layout		: 'form',
								defaults	: {
									xtype	: 'textfield',
									// allowBlank : false,
									// 会覆盖combobox
									anchor	: '95%'
								},
								items		: [{
											fieldLabel	: '作者',
											name		: 'author'
										}]
							}, {
								columnWidth	: 0.24,// 此宽度比例不至于换行
								// 让下一行紧挨此行排列
								layout		: 'form',
								items		: [{
											fieldLabel	: '上架日期',
											name		: 'startDate',
											xtype		: 'datefield',
											format		: 'Y-m-d',
											anchor		: '98%'
										}]
							}, {
								columnWidth	: 0.24,
								layout		: 'form',
								items		: [{
											fieldLabel	: '下架日期',
											name		: 'endDate',
											xtype		: 'datefield',
											format		: 'Y-m-d',
											anchor		: '98%'
										}]
							}, {
								columnWidth	: 0.5,
								layout		: 'form',
								items		: [{
											baseCls		: 'x-plain',
											xtype		: 'panel',
											layout		: 'table',
											fieldLabel	: '可否借阅',
											defaultType	: 'radio',
											isFormField	: true,
											items		: [{
														name		: 'canBorrow',
														boxLabel	: '是',
														width		: 95,
														inputValue	: 1
													}, {
														name		: 'canBorrow',
														boxLabel	: '否',
														inputValue	: 0
													}]
										}]
							}]
				}],
		listeners			: {
			'render'	: function() {
				form.submit();
			}
		}
	}
	);

	var form = formPanel.getForm();

	var win = new Ext.Window({
				title			: '图书信息',
				items			: [formPanel, new Ext.Spacer({
									height	: 5
								}), detailPanel],
				width			: 800,
				modal			: true,
				border			: false,
				shadow			: false,
				autoHeight		: true,
				autoScroll		: true,
				closeAction		: 'hide',
				constrainHeader	: true,
				buttons			: [{
							text	: '提交',
							handler	: function() {
								if (form.isDirty()) {
									alert(Ext.encode(form.getValues(false)));
								}
							}
						}, {
							text	: '重置',
							handler	: function() {
								form.reset();
							}
						}]
			});

	// ================================================================

	new Ext.Viewport({
				layout	: 'column',
				items	: [new Ext.Button({
									text	: 'add',
									handler	: function() {
										win.show(this.getEl());
										resetForm(form);
									}
								}), new Ext.Button({
									text	: 'display',
									handler	: function() {
										win.show(this.getEl());
										form.load({
													url		: 'form.json',
													success	: function(frm,
															action) {},
													waitMsg	: 'Loading'
												});
									}
								})]
			});

	function resetForm(form) {
		var data = {};
		form.items.each(function(f) {
					data[f.getName()] = '';
				});
		form.loadRecord(new Ext.data.Record(data));
	}
}
);